import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Typography } from 'antd';
import { HomeOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

/**
 * 404 页面组件
 */
const NotFoundPage: React.FC = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div className="max-w-md w-full text-center">
        <div className="mb-8">
          <div className="text-9xl font-bold text-gray-300 dark:text-gray-700">404</div>
        </div>
        
        <Title level={2} className="mb-4">
          页面未找到
        </Title>
        
        <Paragraph className="text-gray-600 dark:text-gray-400 mb-8">
          抱歉，您访问的页面不存在。可能是链接错误或页面已被移除。
        </Paragraph>
        
        <Link to="/">
          <Button type="primary" size="large" icon={<HomeOutlined />}>
            返回首页
          </Button>
        </Link>
      </div>
    </div>
  );
};

export default NotFoundPage;
